<template>
  <div class="topic-box p-6">
    <div class="type-tip p-2 rounded-md mb-3 w-fit" :style="typeTipInfo">
      {{ typeTipInfo.text }}
    </div>
    <div class="title leading-relaxed font-semibold text-lg mb-6">
      {{
        number
      }}.某数据库有供应商表S(SNO,SNAME,STATUS,CITY)，零件表P(PNO,PNAME,COLOR,WEIGHT,CITY)和供应情况表SP(SNO,PNO,QTY)，其中,SNO、SNAME、STATUS、CITY分别表示供应商编号、供应商名称、状态和所在城市；PNO、PNAME、COLOR、WEIGHT、CITY分别表示零件编号、零件名称、颜色、重量和存放地；QTY表示零件数量；样本值如图。
    </div>
    <div class="options mt-6">
      <template v-if="props.topic.type === 'multiple'">
        <el-checkbox-group
          v-model="innerAnswerMultiple"
          class="flex flex-col gap-4 w-full"
        >
          <el-checkbox
            v-for="value in 4"
            :key="value"
            :label="String.fromCharCode(64 + value)"
            class="option-item mr-0 p-5 rounded-lg transition-colors duration-300 w-full"
          >
            <span class="ml-2 text-lg"
              >{{ String.fromCharCode(64 + value) }}. 供应商S{{
                value
              }}供应了零件P{{ value }}</span
            >
          </el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-else-if="props.topic.type === 'single'">
        <el-radio-group
          v-model="innerAnswerSingle"
          class="flex flex-col gap-4 w-full"
        >
          <el-radio
            v-for="value in 4"
            :key="value"
            :label="String.fromCharCode(64 + value)"
            class="option-item mr-0 p-5 rounded-lg transition-colors duration-300 w-full"
          >
            <span class="ml-2 text-lg"
              >{{ String.fromCharCode(64 + value) }}. 供应商S{{
                value
              }}供应了零件P{{ value }}</span
            >
          </el-radio>
        </el-radio-group>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
type Topic = { type: "option" | "multiple" | string; [key: string]: any };
const props = withDefaults(
  defineProps<{
    //题目内容
    topic?: Topic;
    //答案
    answer?: string | string[];
    //题目编号
    number?: number;
  }>(),
  {
    topic: () => ({ type: "single" } as Topic),
    answer: "",
    number: -1,
  }
);
const emits = defineEmits<{
  (e: "update:answer", value: string | string[]): void;
}>();
const innerAnswerSingle = computed<string>({
  get: () => (Array.isArray(props.answer) ? "" : props.answer || ""),
  set: (value) => emits("update:answer", value),
});
const innerAnswerMultiple = computed<string[]>({
  get: () => (Array.isArray(props.answer) ? props.answer : []),
  set: (value) => emits("update:answer", value),
});
const TYPE_TIP_MAP = new Map([
  ["single", { color: "#0075ff", backgroundColor: "#e3f3ff", text: "单选题" }],
  [
    "multiple",
    { color: "#00adcd", backgroundColor: "#dbf9ff", text: "多选题" },
  ],
]);
const typeTipInfo = computed(() => {
  return TYPE_TIP_MAP.get(props.topic.type) || { text: "未知" };
});
</script>

<style lang="scss" scoped>
.el-radio {
  margin-right: 0;

  &:hover {
    background-color: #f5f7fa;
  }
}
</style>
